<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Aprendiendo jQuery</title>
		<script src="jquery-1.8.3.min.js"> </script>
		<script type="text/javascript">	
		function jqStopDelay(){
			$(document).on('ready', function(){
				
				$('.jqCap19').css('margin', '0px auto');
				$('.box1').css('margin-bottom', '100px');			
				
				
				$('#btJuntar').click(function(){
					$('.box1').stop(true);
					$('.box1').animate({
						marginBottom:0,
						opacity:0.5
					}, 5000);
				});
				
				$('#btSeparar').click(function(){
					$('.box1').stop(true);
					$('.box1').animate({
						marginBottom:100,
						opacity:1
					}, 5000);
				});
				
				$('#btParar').click(function(){
					$('.box1').stop(true);
				});
				
				$('#btDelay').click(function(){
					$('.box1').animate({
						marginBottom:0,
						opacity:0.5
						}, 1000).delay(3000).animate({
						marginBottom:100,
						opacity:1
					}, 4000);
				});
			});
		}
		</script>
		<style>
		.ejemplos {
			background: #f1f1f1;
			display: block;
			height: 100px;
			margin: 25px auto;
			width: 500px;
			border-radius: 0 50px 0 50px;
			overflow: auto;
			}
		</style>
	</head>
	<body>
		<button id="btJuntar">Juntar</button>
		<button id="btSeparar">Separar</button>
		<button id="btParar">Parar</button>
		<button id="btDelay">Delay</button>
		<div class="ejemplos jqCap19 box1"></div>
		<div class="ejemplos jqCap19 box2"></div>
		
		<!--
		http://www.bitstorm.org/jquery/color-animation/
		<script type="text/javascript" src="http://www.rfsouto.com/Scripts/capitulo17.js"></script>-->
		<script type="text/javascript">
		<!--
		jqStopDelay();
		//-->
		</script>
	</body>
</html>